import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

type ApiFun = () => void

export function useLazyData (apiFun: ApiFun) {
  // 创建出来的要监听的dom节点
  const target = ref(null)

  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // isIntersecting 是否进去可视区域了，是否在屏幕上看到他了
    if (isIntersecting) {
      stop()
      // 真正的发请求啦
      apiFun()
    }
  })

  return {
    target
  }
}
